<template>

  <!--  轮播图-->
  <div style="margin: 0 auto;width: 1200px;height: 320px;">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="url in bannerArr" :key="url">
        <img :src="url" style="width: 100%;height: 100%">
      </el-carousel-item>
    </el-carousel>
  </div>

  <!--选项卡-->
  <div class="card_category">
    <a href="" class="card_category_list">
      <span><el-icon size="40px" color="#000"><Mic/></el-icon></span>
      <p class="category__info">演唱会</p>
    </a>

    <a href="" class="card_category_list">
      <span><el-icon size="40px" color="#000"><VideoCameraFilled/></el-icon></span>
      <p class="category__info">话剧歌剧</p></a>

    <a href="" class="card_category_list">
      <span><el-icon size="40px" color="#000"><Basketball/></el-icon></span>
      <p class="category__info">体育</p>
    </a>

    <a href="" class="card_category_list">
      <span><el-icon size="40px" color="#000"><Bicycle/></el-icon></span>
      <p class="category__info">儿童亲子</p>
    </a>

    <a href="" class="card_category_list">
      <span><el-icon size="40px" color="#000"><Handbag/></el-icon></span>
      <p class="category__info">展览休闲</p>
    </a>

    <a href="" class="card_category_list">
      <span><el-icon size="40px" color="#000"><Headset/></el-icon></span>
      <p class="category__info">音乐会</p>
    </a>

    <a href="" class="card_category_list">
      <span><el-icon size="40px" color="#000"><Sunrise/></el-icon></span>
      <p class="category__info">曲苑杂坛</p>
    </a>

    <a href="" class="card_category_list">
      <span><el-icon size="40px" color="#000"><User/></el-icon></span>
      <p class="category__info">舞蹈芭蕾</p>
    </a>

    <a href="" class="card_category_list">
      <span><el-icon size="40px" color="#000"><SwitchFilled/></el-icon></span>
      <p class="category__info">二次元</p>
    </a>
    <a href="" class="card_category_list">
      <span><el-icon size="40px" color="#000"><CameraFilled/></el-icon></span>
      <p class="category__info">旅游展览</p>
    </a>
  </div>
  <div style="width: 1200px;margin-top: 15px;border-width: 2px;margin: 0 auto;">
    <el-card style="margin-top: 20px" >
      <div style="margin-bottom: 5px;">
        <span style="font-size: 24px">演唱会</span>
        <span class="p-wrod" style="float: right;margin-top: 0;">
        <el-link class="p-wrod1" to="/detail">查看全部</el-link>
      </span>
      </div>
      <el-row :gutter="10">
        <el-col :span="6">
          <img class="ph" src="/演唱会3.jpg" alt="" width="275px" height="378">
          <div class="ph1" style="background: #00000080;width: 275px;">
            <p class="rnw" style="color: #ffffff;margin-left: 20px">2024仙人掌音乐节</p>
            <div style="margin-top: 40px;">
            <span class="rnw" style="color: #ffffff;margin-left: 20px">￥358</span>
            <span  class="rnw" style="font-size: 10px;color: #ffffff;">起</span>
          </div>
          </div>
        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会4.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会5.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会1.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会5.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会7.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会6.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>

      </el-row>
    </el-card>
    <el-card style="margin-top: 20px" >
      <div style="margin-bottom: 5px;">
        <span style="font-size: 24px">话剧</span>
        <span class="p-wrod" style="float: right;margin-top: 0;">
        <el-link class="p-wrod1" to="/detail">查看全部</el-link>
      </span>
      </div>
      <el-row :gutter="10">
        <el-col :span="6">
          <img class="ph" src="/演唱会1.jpg" alt="" width="275px" height="378">
          <div class="ph1" style="background: #00000080;width: 275px;">
            <p class="rnw" style="color: #ffffff;margin-left: 20px">2024仙人掌音乐节</p>
            <div style="margin-top: 40px;">
              <span class="rnw" style="color: #ffffff;margin-left: 20px">￥358</span>
              <span  class="rnw" style="font-size: 10px;color: #ffffff;">起</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会2.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会3.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会4.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会5.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会6.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会7.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>

      </el-row>
    </el-card>
    <el-card style="margin-top: 20px" >
      <div style="margin-bottom: 5px;">
        <span style="font-size: 24px">IU专场</span>
        <span class="p-wrod" style="float: right;margin-top: 0;">
        <el-link class="p-wrod1" to="/detail">查看全部</el-link>
      </span>
      </div>
      <el-row :gutter="10">
        <el-col :span="6">
          <img class="ph" src="/演唱会66.jpg" alt="" width="275px" height="378">
          <div class="ph1" style="background: #00000080;width: 275px;">
            <p class="rnw" style="color: #ffffff;margin-left: 20px">2024仙人掌音乐节</p>
            <div style="margin-top: 40px;">
              <span class="rnw" style="color: #ffffff;margin-left: 20px">￥358</span>
              <span  class="rnw" style="font-size: 10px;color: #ffffff;">起</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会66.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会66.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会66.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.03.23-23.24</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会66.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会66.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/演唱会66.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>

      </el-row>
    </el-card>
    <el-card style="margin-top: 20px" >
      <div style="margin-bottom: 5px;">
        <span style="font-size: 24px">儿童亲子</span>
        <span class="p-wrod" style="float: right;margin-top: 0;">
        <el-link class="p-wrod1" to="/detail">查看全部</el-link>
      </span>
      </div>
      <el-row :gutter="10">
        <el-col :span="6">
          <img class="ph" src="/极品美少女之王之蔑视.jpg" alt="" width="275px" height="378">
          <div class="ph1" style="background: #00000080;width: 275px;">
            <p class="rnw" style="color: #ffffff;margin-left: 20px">2024仙人掌音乐节</p>
            <div style="margin-top: 40px;">
              <span class="rnw" style="color: #ffffff;margin-left: 20px">￥358</span>
              <span  class="rnw" style="font-size: 10px;color: #ffffff;">起</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/极品美少女之你能咋的.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/极品美少女之你说什么八卦.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/极品美少女之我挺瞌睡.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/极品美少女之我爱假笑.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="6">
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/极品美少女之贝雷帽.jpg" style="width: 120px;height: 160px;margin-top: 0;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="/极品美少女之睡觉着咪咪.jpg" style="width: 120px;height: 160px;margin-top: 52px;margin-left: 0">
            </el-col>
            <el-col :span="14">
              <p class="p-wrod" style="margin-top: 52px">ROCK CANDY春糖音乐节</p>
              <p class="p-wrod1">成都费物质文化遗产博览园</p>
              <p class="p-wrod1">2024.07.01 周一 21:00</p>
              <div style="margin-top: 40px">
                <span style="color: #ff1268">￥358</span>
                <span style="font-size: 10px;color: #ff1268">起</span>
              </div>
            </el-col>
          </el-row>

        </el-col>

      </el-row>
    </el-card>

  </div>

</template>

<script setup>

import { ref } from "vue";
const bannerArr=ref(["/imgs/1.avif","/imgs/2.avif","/imgs/3.avif","/imgs/4.avif","/imgs/5.avif",])


</script>

<style scoped>
.p-wrod{
  color: #4a4a4a;
  font-size: 14px;
  margin-top: 0;
}
.p-wrod:hover{
  color: #ff1268;
}


 .card_category_list {
  width: 110px;
  height: 70px;
  float: left;
  margin-top: 20px;
  margin-right: 10px;
  /*统一卡片里所有的字号都是12像素*/
  font-size: 16px;
  /*让卡片里所有信息水平居中*/
  text-align: center;
}

.card_category_list > p {
  margin: 0;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  color: rgb(234, 27, 106);
}

.card_category {
  margin: 0 auto;
  width: 1200px;
  height: 100px;
  border: 1px solid rgba(127, 127, 127, 0.3);
}

.p-wrod1:hover{
  color: #ff1268;
}
.p-wrod1{
color: #9b9b9b;
  font-size: 12px;
  margin-top: 14px;
}
.ph{
  position: absolute;
}
.ph1{
  position: absolute;
  bottom: 5px;
}
.ph1:hover{
  color:#ff1268 ;
}
.rnw:hover{
  color: #ff1268 !important;
}
</style>